<template>
  <div>
    <transition name="bounce">
      <div class="box" v-if="isShow">
        <div class="main">
          <span class="close" @click="closeClk">×</span>
          <h1>{{title}}</h1>
          <div class="content">
            <slot name="content"></slot>
          </div>
          <div class="ipt">
            <slot name="ipt"></slot>
          </div>
          <div class="btns">
            <slot name="btns"></slot>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["isShow", "title"],
  methods: {
    closeClk() {
      this.$emit("update:isShow", false);
    },
  },
};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
}

.main {
  width: 300px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
}

.close {
  font-size: 30px;
  float: right;
  cursor: pointer;
}

.btns {
  width: 100%;
  margin-top: 20px;
  box-sizing: border-box;
  padding-left: 40%;
  display: flex;
  justify-content: space-between;
}
</style>